<template>
    <div class="delivery-tracking">
        <div class="status-container" v-if="false">
            <div class="status-item" :class="{ completed: currentStep >= 1 }">
                <div class="icon-wrapper">
                    <img src="/package2.png" class="w-[30px] h-[30px]" alt="" srcset="">
                </div>
            </div>
            <div class="connector-line" :class="{ completed: currentStep >= 1 }"></div>
            <div class="status-item" :class="{ completed: currentStep >= 2 }">
                <div class="icon-wrapper">
                    <img src="/van66.png" class="w-[40px] h-[40px]" alt="" srcset="">
                </div>
            </div>
            <div class="connector-line" :class="{ completed: currentStep >= 2 }"></div>
            <div class="status-item" :class="{ completed: currentStep >= 3 }">
                <div class="icon-wrapper">
                    <img src="/package1.png" class="w-[30px] h-[30px]" alt="" srcset="">
                </div>
            </div>
        </div>

        <div class="w-full text-center mb-2 font-bold">Shipping & production</div>
        <DeliveryShow />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import DeliveryShow from './deliveryShow.vue'

// 当前物流进度步骤 (1-已揽收, 2-运输中, 3-已送达)
const currentStep = ref(2)
// 星期一Fri.
// 星期Sat.
// 星期三Sun.
// 星期四Mon.
// 星期五Tues.
// 星期六Wed.
// 星期日Thurs.
const list = [
    "Jan.",
    // "Feb.",
    // "Mar.",
    // "Apr.",
    // "May.",
    // "Jun.",
    // "Jul.",
    // "Aug.",
    // "Sept.",
    // "Oct.",
    // "Nov.",
    // "Dec.",
]
// 物流信息数据

const deliveryData = {
    type: 'Standard',
    startDate: {
        month: '9月',
        day: '9',
        weekday: '周一'
    },
    endDate: {
        month: '9月',
        day: '9',
        weekday: '周一'
    },
    isFree: true
}
</script>

<style scoped lang="scss">
@use "./style.scss" as *;
</style>